<!DOCTYPE html>
<html>
<head>
    <#include "../include.ftl" >
    <style type="text/css">
        .layui-form-label{
            width: 30px !important;
        }
        .layui-input-block{
            margin-left: 30px !important;
        }
        .layui-input{
            height: 3em;
        }
        .layui-form-item {
             margin-bottom: 1em;
        }
        #loginIn{
            font-weight: bold;
            font-size: 2rem;
        }
        body{
            background-image: url("${BASECOMMON}/img/login_bg.jpg");
            background-size: 100%;
            background-repeat: no-repeat;
        }
        .form_bg{
            background-color: #ffffff;
        }
        @media screen and (min-height: 300px) {
            .form_bg{
                margin-top: 70px !important;
            }
        }
        @media screen and (min-height: 400px) {
            .form_bg{
                margin-top: 100px !important;
            }
        }
        @media screen and (min-height: 500px) {
            .form_bg{
                margin-top: 130px !important;
            }
        }

        @media screen and (min-height: 600px) {
            .form_bg{
                margin-top: 260px !important;
            }
        }
        @media screen and (min-height: 700px) {
            .form_bg{
                margin-top: 300px !important;
            }
        }
        @media screen and (min-height: 800px) {
            .form_bg{
                margin-top: 350px !important;
            }
        }
        @media screen and (min-height: 900px) {
            .form_bg{
                margin-top: 400px !important;
            }
        }
        @media screen and (min-height: 1000px) {
            .form_bg{
                margin-top: 450px !important;
            }
        }
        @media screen and (min-height: 1300px) {
            .form_bg{
                margin-top: 600px !important;
            }
        }
        @media screen and (min-width: 300px) {
            .form_bg{
                margin-left: 0rem !important;
                margin-right: 0rem !important;
            }
        }
        @media screen and (min-width: 500px) {
            .form_bg{
                margin-left: 5rem !important;
                margin-right: 5rem !important;
            }
        }
        @media screen and (min-width: 700px) {
            .form_bg{
                margin-left: 10rem !important;
                margin-right: 10rem !important;
            }
        }
        @media screen and (min-width: 900px) {
            .form_bg{
                margin-left: 18rem !important;
                margin-right: 18rem !important;
            }
        }
        @media screen and (min-width: 1200px) {
            .form_bg{
                margin-left: 25rem !important;
                margin-right: 25rem !important;
            }
        }

    </style>
</head>
<body class="layui-fluid layui-layout-body">
<div class="layui-form form_bg" >

    <div class="layui-row">
        <div class="layui-form-item">
            <label class="layui-form-label"><img src="${BASECOMMON}/img/user_03.png"/></label>
            <div class="layui-input-block">
                <input type="text"  id="name" name="name" autocomplete="off" placeholder="请输入用户名" class="layui-input" value="admin">
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-form-item">
            <label class="layui-form-label"><img src="${BASECOMMON}/img/pass_07.png"/></label>
            <div class="layui-input-block">
                <input type="password"  id="pwd" name="pwd"  autocomplete="off" placeholder="请输入密码"class="layui-input" value="admin">
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-xs7">
            <div class="layui-form-item">
                <label class="layui-form-label"><img src="${BASECOMMON}/img/yanzheng_09.png"/></label>
                <div class="layui-input-block">
                    <input type="text" onkeyup="valueReplace.numbers(this,'')" placeholder="请输入验证码" id="yzm" maxlength="4" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-col-xs5">
            <div class='validation' style="opacity: 1; right: -5px;float: right;">
                <img class="img_verify" src="${LOGINVERIFY}" onclick="clickVerify(this)" title="点击更换验证码" style="height: 3em">
            </div>
        </div>
    </div>

    <div class="layui-row">
        <div class="layui-form-item">
            <input type="button" value="登录"  id="loginIn" class="layui-btn layui-btn-fluid layui-btn-normal layui-input-spacing"/>
        </div>
    </div>



</div>
<script type="text/javascript" src = "${BASEWEBMOBILE}/login/login.js"></script>
<script type="text/javascript">

    /**
     * @Author : Mr.Yan
     * @create : 2019/4/29
     * @description : 点击验证码事件，改变图片
     */
    function clickVerify(e) {
        // 加上time防止浏览器缓存的问题
        e.src = "${LOGINVERIFY}?time=" + new Date().getTime();
    }

</script>
</body>
</html>
